<template>
  <div>
    <div :class="className" :style="{height:height,width:width}" ref="echartsfrom" />



    <div class="radio">
      排序：
      <el-radio-group v-model="reverse">
        <el-radio :label="true">倒序</el-radio>
        <el-radio :label="false">正序</el-radio>
      </el-radio-group>
    </div>
    <el-divider></el-divider>
    <el-timeline :reverse="reverse">
      <el-timeline-item v-for="(activity, index) in activityList" :key="index" :timestamp="activity.updateTime">

        <el-card>
          <h4>{{activity.updateTime}}</h4>
          <el-row>
            <el-col :span="12">
              <p> {{activity.activityName}}</p>
            </el-col>

            <el-col :span="12">
              <p> 操作人：{{activity.user}} </p>
            </el-col>
            <el-col :span="12">
              <p> 审批意见：{{fromteVars(activity.vars) }} </p>
            </el-col>

          </el-row>

        </el-card>

      </el-timeline-item>
    </el-timeline>

    <!-- <el-table v-loading="loading" :data="activityList">
      <el-table-column label="操作人" align="center" prop="user" />
      <el-table-column label="任务节点名称" align="center" prop="activityName" />

      <el-table-column label="备注" align="center" prop="vars.remark" />
      <el-table-column label="创建时间" align="center" prop="createTime" />
      <el-table-column label="审批时间" align="center" prop="updateTime" />
    </el-table> -->


  </div>



</template>

<script>
  import {
    getProcessHistoric,
    getProcessHistoricBYbusinessId
  } from "@/api/activiti/pocess";
  import echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
  import resize from '@/views/dashboard/mixins/resize.js'
  const animationDuration = 6000
  export default {
    name: "pocessHisroric",
    components: {},
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '350px'
      },
      autoResize: {
        type: Boolean,
        default: true
      },
      chartData: {
        type: Object,

      },

      detailDialog: {
        type: Object,
        default: function() {
          return {
            // id
            id: null,
            open: null,
            businessId: null,
            befinitionKey: null,
          }
        },
      },




    },

    data() {
      return {
        reverse: false,
        id: null,
        businessId: null,
        befinitionKey: null,

        chart: null,
        loading: true,
        activityList: [],
        option: {
          title: {
            text: ''
          },
          tooltip: {},
          animationDurationUpdate: 1500,
          animationEasingUpdate: 'quinticInOut',
          series: [{
            type: 'graph',
            name: '',
            layout: 'none',
            symbolSize: 50,
            roam: true,
            label: {
              show: true
            },

            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [4, 10],
            edgeLabel: {
              fontSize: 20
            },

            tooltip: {
              formatter: function(params, ticket, callback) {
                let value = params.value;
                let arr = "";
                if (value) {
                  if (typeof value == 'string') {
                    return value;
                  }

                  for (let vdate of value) {
                    arr += vdate;
                    arr += '<br/>';
                  }
                }

                return arr;

              },

            },
            symbol: 'rect',
            symbolSize: [80, 50],

            data: [],
            // links: [],
            links: [

            ],
            lineStyle: {
              opacity: 0.9,
              width: 2,
              curveness: 0
            }
          }]
        },

      };
    },


    watch: {
      /* 监听打开状态 */
      "detailDialog.open": function(newOpen, oldOpen) {

        //显示则刷新
        if (newOpen) {
          this.initDate();
          console.log(this.$options.name + "监听打开状态", this.detailDialog.id, "--", this.id)
        }
      },
    },



    created() {
      this.initDate();
    },

    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
    },


    methods: {


      fromteVars(vars) {
        if (vars) {
          if (vars.remark) {
            return vars.remark
          }
        }
      },
      /* 初始化DetailDialog */
      initDetailDialog() {
        this.id = this.detailDialog.id
        this.businessId = this.detailDialog.businessId
        this.befinitionKey = this.detailDialog.befinitionKey
      },
      /* 初始化form */
      initDate() {
        this.initDetailDialog();
        this.loading = true;
        /* 根据processInstanceId */
        if (this.id) {
          getProcessHistoric(this.id).then(response => {

            this.chart.setOption({
              series: [{
                data: response.data.data,
                links: response.data.links
              }]

            })
            this.activityList = response.data.actGrcPocessVariables;
            this.loading = false;
          });
        } else {
          getProcessHistoricBYbusinessId(this.businessId, this.befinitionKey).then(response => {

            this.chart.setOption({
              series: [{
                data: response.data.data,
                links: response.data.links
              }]

            })
            this.activityList = response.data.actGrcPocessVariables;
            this.loading = false;
          }).catch(response => {
            this.loading = false;

          });
        }



      },
      initChart() {

        this.chart = echarts.init(this.$refs.echartsfrom, 'macarons')
        this.chart.setOption(this.option)
      },

    },

  }
</script>

<style>
</style>
